<template>
  <view class="wanl-money-log">
    <view class="edgeInsetTop"> </view>
    <!-- 交易 -->
    <block v-if="moneyData.type == 'pay' && data">
      <view class="bg-white padding-xl margin-bottom-bj" v-for="(item, index) in data" :key="item.id">
        <view class="text-center solid-bottom title">
          <text>{{ item.shop.shopname }}</text>
          <view class="wanl-black"> -{{ item.pay.price }} </view>
        </view>
        <view class="goods">
          <view class="item solid-bottom" v-for="(goods, indexs) in item.goods" :key="indexs">
            <image :src="$wanlshop.oss(goods.image, 125, 125)"></image>
            <view class="info">
              <view>
                <text class="text-cut-2">{{ goods.title }}</text>
              </view>
              <view class="wanl-gray"> {{ goods.difference }} x {{ goods.number }} </view>
            </view>
            <view class="text-price">
              {{ goods.price }}
            </view>
          </view>
        </view>
        <view class="list margin-top-xl text-sm">
          <view class="flex">
            <view class="type wanl-gray"> 订单号 </view>
            <view class="info"> {{ item.pay.order_no }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 交易号 </view>
            <view class="info"> {{ item.pay.pay_no }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 订单价格 </view>
            <view class="info text-price"> {{ item.pay.order_price }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 支付方式 </view>
            <view class="info"> {{ moneyData.memo }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 交易订单号 </view>
            <view class="info"> {{ item.pay.trade_no }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 实际支付 </view>
            <view class="info text-price"> {{ item.pay.actual_payment }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 支付时间 </view>
            <view class="info"> {{ item.paymenttime_text }} </view>
          </view>

          <view class="flex">
            <view class="type wanl-gray"> 快递费 </view>
            <view class="info text-price"> {{ item.pay.freight_price }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 优惠金额 </view>
            <view class="info text-price"> {{ item.pay.discount_price }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 总金额 </view>
            <view class="info text-price"> {{ item.pay.total_amount }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 交易时间 </view>
            <view class="info"> {{ item.createtime_text }} </view>
          </view>
        </view>
      </view>
    </block>
    <!-- 拼团 -->
    <block v-else-if="moneyData.type == 'groups' && data">
      <view class="bg-white padding-xl margin-bottom-bj" v-for="(item, index) in data" :key="item.id">
        <view class="text-center solid-bottom title">
          <text>{{ item.shop.shopname }}</text>
          <view class="wanl-black"> -{{ item.pay.price }} </view>
        </view>
        <view class="goods">
          <view class="item solid-bottom" v-for="(goods, indexs) in item.goods" :key="indexs">
            <image :src="$wanlshop.oss(goods.image, 125, 125)"></image>
            <view class="info">
              <view>
                <text class="text-cut-2">{{ goods.title }}</text>
              </view>
              <view class="wanl-gray"> {{ goods.difference }} x {{ goods.number }} </view>
            </view>
            <view class="text-price">
              {{ goods.price }}
            </view>
          </view>
        </view>
        <view class="list margin-top-xl text-sm">
          <view class="flex">
            <view class="type wanl-gray"> 订单号 </view>
            <view class="info"> {{ item.pay.order_no }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 交易号 </view>
            <view class="info"> {{ item.pay.pay_no }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 订单价格 </view>
            <view class="info text-price"> {{ item.pay.order_price }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 支付方式 </view>
            <view class="info"> {{ moneyData.memo }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 交易订单号 </view>
            <view class="info"> {{ item.pay.trade_no }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 实际支付 </view>
            <view class="info text-price"> {{ item.pay.actual_payment }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 支付时间 </view>
            <view class="info"> {{ item.paymenttime_text }} </view>
          </view>

          <view class="flex">
            <view class="type wanl-gray"> 快递费 </view>
            <view class="info text-price"> {{ item.pay.freight_price }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 优惠金额 </view>
            <view class="info text-price"> {{ item.pay.discount_price }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 总金额 </view>
            <view class="info text-price"> {{ item.pay.total_amount }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 交易时间 </view>
            <view class="info"> {{ item.createtime_text }} </view>
          </view>
        </view>
      </view>
    </block>
    <!-- 用户充值 -->
    <block v-else-if="moneyData.type == 'recharge' && data">
      <view class="bg-white padding-xl margin-bottom-bj">
        <view class="text-center solid-bottom title">
          <text>{{ moneyData.memo }}</text>
          <view class="wanl-black"> +{{ moneyData.money }} </view>
        </view>
        <view class="list margin-top-xl text-sm">
          <view class="flex">
            <view class="type wanl-gray"> 状态 </view>
            <view class="info"> 充值成功 </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 订单号 </view>
            <view class="info"> {{ data.orderid }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 支付类型 </view>
            <view class="info"> {{ bankList[data.paytype] }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 交易号 </view>
            <view class="info"> {{ data.memo }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 变动后 </view>
            <view class="info text-price"> {{ moneyData.after }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 变动前 </view>
            <view class="info text-price"> {{ moneyData.before }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 充值时间 </view>
            <view class="info"> {{ $wanlshop.timeFormat(moneyData.createtime, 'yyyy-mm-dd hh:MM:ss') }} </view>
          </view>
        </view>
      </view>
    </block>

    <!-- 用户提现 -->
    <block v-else-if="moneyData.type == 'withdraw' && data">
      <view class="bg-white padding-xl margin-bottom-bj">
        <view class="text-center solid-bottom title">
          <text>{{ moneyData.memo }}</text>
          <view class="wanl-black"> {{ moneyData.money }} </view>
        </view>
        <view class="list margin-top-xl text-sm">
          <view class="flex">
            <view class="type wanl-gray"> 状态 </view>
            <view class="info"> 提现{{ withdrawStatus[data.status] }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 提现金额 </view>
            <view class="info text-price"> {{ data.money }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 服务费 </view>
            <view class="info text-price"> {{ data.handingfee }} </view>
          </view>
          <view class="flex" v-if="data.status == 'successed' && data.transfertime">
            <view class="type wanl-gray"> 转账时间 </view>
            <view class="info"> {{ $wanlshop.timeFormat(data.transfertime, 'yyyy-mm-dd hh:MM:ss') }} </view>
          </view>
          <view class="flex" v-if="data.status == 'rejected' && data.memo">
            <view class="type wanl-gray"> 拒绝理由 </view>
            <view class="info"> {{ data.memo }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 类型 </view>
            <view class="info"> {{ bankList[data.type] }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 账号 </view>
            <view class="info"> {{ data.account }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 交易号 </view>
            <view class="info"> {{ data.orderid }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 变动后 </view>
            <view class="info text-price"> {{ moneyData.after }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 变动前 </view>
            <view class="info text-price"> {{ moneyData.before }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 提交时间 </view>
            <view class="info"> {{ $wanlshop.timeFormat(moneyData.createtime, 'yyyy-mm-dd hh:MM:ss') }} </view>
          </view>
        </view>
      </view>
    </block>
    <!-- 退款 -->
    <block v-else-if="moneyData.type == 'refund' && data">
      <view class="bg-white padding-xl margin-bottom-bj">
        <view class="text-center solid-bottom title">
          <text>{{ moneyData.memo }}</text>
          <view class="wanl-black"> {{ moneyData.money > 0 ? '+' + moneyData.money : moneyData.money }} </view>
          <view @tap="$wanlshop.to(`/pages/user/refund/details?id=${data.refund.id}`)">
            <button class="cu-btn sm radius-bock">查看退款</button>
          </view>
        </view>
        <view class="list margin-top-xl text-sm">
          <view class="flex">
            <view class="type wanl-gray"> 商家 </view>
            <view class="info"> {{ data.shop.shopname }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 订单号 </view>
            <view class="info"> {{ data.order_no }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 下单时间 </view>
            <view class="info"> {{ data.createtime_text }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 支付时间 </view>
            <view class="info"> {{ data.paymenttime_text }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 退款金额 </view>
            <view class="info text-price"> {{ data.refund.price }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 退款类型 </view>
            <view class="info"> {{ getType(data.refund.type) }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 退款理由 </view>
            <view class="info"> {{ getReason(data.refund.reason) }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 退款时间 </view>
            <view class="info"> {{ $wanlshop.timeFormat(data.refund.createtime, 'yyyy-mm-dd hh:MM:ss') }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 退款时间 </view>
            <view class="info"> {{ $wanlshop.timeFormat(data.refund.completetime, 'yyyy-mm-dd hh:MM:ss') }} </view>
          </view>
        </view>
      </view>
    </block>
    <!-- 系统 -->
    <block v-else>
      <view class="bg-white padding-xl margin-bottom-bj">
        <view class="text-center solid-bottom title">
          <text>{{ moneyData.memo }}</text>
          <view class="wanl-black"> {{ moneyData.money > 0 ? '+' + moneyData.money : moneyData.money }} </view>
        </view>
        <view class="list margin-top-xl text-sm">
          <view class="flex">
            <view class="type wanl-gray"> 变动后 </view>
            <view class="info text-price"> {{ moneyData.after }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 变动前 </view>
            <view class="info text-price"> {{ moneyData.before }} </view>
          </view>
          <view class="flex">
            <view class="type wanl-gray"> 时间 </view>
            <view class="info"> {{ $wanlshop.timeFormat(moneyData.createtime, 'yyyy-mm-dd hh:MM:ss') }} </view>
          </view>
        </view>
      </view>
    </block>
    <view class="edgeInsetBottom"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      moneyData: {},
      data: null,
      bankList: {
        alipay: '支付宝',
        wechat: '微信',
        jssdk: '微信公众平台',
        ALIPAY: '支付宝',
        WECHAT: '微信',
        ICBC: '工商银行',
        ABC: '农业银行',
        PSBC: '邮储银行',
        CCB: '建设银行',
        CMB: '招商银行',
        BOC: '中国银行',
        COMM: '交通银行',
        SPDB: '浦发银行',
        GDB: '广发银行',
        CMBC: '民生银行',
        PAB: '平安银行',
        CEB: '光大银行',
        CIB: '兴业银行',
        CITIC: '中信银行',
      },
      withdrawStatus: {
        created: '申请中',
        successed: '成功',
        rejected: '已拒绝',
      },
    };
  },
  onLoad(option) {
    this.moneyData = JSON.parse(option.data);
    this.loadData();
  },
  methods: {
    async loadData() {
      let moneyData = this.moneyData;
      this.$api.get({
        url: '/wanlshop/pay/details',
        data: {
          id: moneyData.service_ids,
          type: moneyData.type,
        },
        success: res => {
          this.data = res;
        },
      });
    },
    getType(e) {
      return ['无需退货', '退货退款'][e];
    },
    getReason(e) {
      return ['不喜欢', '空包裹', '一直未送达', '颜色/尺码不符', '质量问题', '少件漏发', '假冒品牌'][e];
    },
  },
};
</script>

<style>
.wanl-money-log .title {
  padding: 20rpx 0 50rpx 0;
}
.wanl-money-log .title > view {
  font-size: 70rpx;
  font-weight: 600;
  margin-top: 14rpx;
}
.wanl-money-log .list .flex {
  margin-bottom: 25rpx;
}
.wanl-money-log .list .flex .type {
  width: 150rpx;
}
.wanl-money-log .list .flex .info {
  flex-grow: 1;
}

.wanl-money-log .goods .item {
  display: flex;
  align-items: center;
  margin: 25rpx 0;
  padding-bottom: 25rpx;
}

.wanl-money-log .goods .item image {
  width: 100rpx;
  height: 100rpx;
  margin-right: 25rpx;
}
.wanl-money-log .goods .item .info {
  flex: 1;
}
</style>
